<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .big-box{
            width: 1910px;
            height: 950px;
            display: flex;
          
        }
        .big-box .tu{
            width: 470px;
           
        }
        .big-box .tu img{
            width: 100%;
            height: 950px;
          
        }
        .big-box .zong{
            width: 1440px;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #fafafa;
        }
        .zong .header{
            height: 160px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .zong .header section{
            width: 200px;
            height: 52px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-left: 20px;
        }
        .zong .header section h1{
            height: 52px;
            width: 52px;
        }
        .zong .header section h1 img{
            height: 52px;
            width: 52px;
        }
        .zong .header section p{
            font-size: 30px;
            font-weight: 600;
        }
        .zong .header ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .zong .header ul a{
            color: #9a9a9a;
            padding-right: 45px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            
        }
        .zong .header ul a:nth-child(4){
            border-left: 1px solid #9a9a9a;
            padding-left: 20px;
        }
        .zong .header ul a li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }
        .zong .header ul a h6{
            border-top: 7px solid #9a9a9a;
            border-left:7px solid transparent;
            border-right:7px solid transparent;
        }
        .zong .header ul a:hover{
            color: orange;
        }
        .zong .header ul a h5{
            border-bottom:7px solid orange ;
            border-left:7px solid transparent;
            border-right:7px solid transparent;
            display: none;
        }

       .zong form{
           width: 565px;
           height: 700px;
           margin: auto;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: center;
           background-color: #ffffff;
       }
       .zong form .head{
           width: 445px;
           height: 50px;
         
           display: flex;
       }
       .zong form .head a{
           width: 100px;
           height: 50px;
           /* color: #eaeaea; */
           
       }
       .zong form .head a h2{
            width: 70px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            
       }
       .zong form .head a h2:hover{
           font-weight: 700;
           border-bottom: 2px solid orange;
       }
       .zong form .chan{
           width: 445px;
           height: 72px;
           background-color:#f9f9f9 ; 
          
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
       }
       .zong form .chan span{
           width: 100%;
           height: 12px;
           font-size: 12px;
           color:gray;
           line-height: 12px;
           padding-left: 26px;
           /* color: #f9f9f9; */
       }
       .zong form .chan select{
           width: 445px;
           height: 60px;
           border: none;
           font-size: 30px;
           padding-left: 20px;
           background-color:#f9f9f9 ; 
       }
       .zong form .chan select option{
          
           height: 40px;
       }
       

       .zong form .guo{
           width: 445px;
           height: 72px;
           background-color: #f9f9f9;
            display: flex;
           justify-content: space-between;
           align-items: flex-start;
       } 
       .zong form .guo .jia{
        width: 175px;
        height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
       }
       .zong form .guo .jia span{
           height: 12px;
           font-size: 12px;
           color: gray;
           padding-left: 20px;
           line-height: 12px;
       }
       .zong form .guo .jia select{
           width: 175px;
           height: 60px;
           font-size: 24px;
           background-color: #f9f9f9;
           border: none;
           padding-left: 20px;
       }
       .zong form .guo input{
           width: 250px;
           height: 72px;
           background-color: #f9f9f9;
           font-size: 24px;
           margin-left: 20px;
       }
     
       .zong form .duanxin{
           width: 445px;
           height: 72px;
           background-color: #f9f9f9;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
        
       .zong form .duanxin #number2{
           width: 325px;
           height: 72px;
           font-size: 24px;
           background-color: #f9f9f9;
           padding-left: 20px;
       }
       .zong form .duanxin #btn{
            width: 120px;
            height: 72px;
            background-color: #f9f9f9;
            color: orange;
            font-size: 16px;
       }
       .zong form .xieyi{
           width: 445px;
           height: 30px;
           display: flex;
           justify-content: flex-start;
           align-items: flex-start;
           line-height: 30px;
       }
       .zong form .xieyi input{
           margin-top: 10px;
       }
       .zong form .xieyi strong{
           font-weight: 600;
       }
       .zong form button{
           width: 445px;
           height: 72px;
           background-color: #ffbe99;
           color: white;
           text-align: center;
           line-height: 72px;
           border: none;
           font-size: 20px;
       }
        .zong form .foot{
            width: 445px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
        .zong form .foot a{
            color: orange;
        }
        .zong form h4{
            color: #aaaaaa;
        }
        .zong form .end{
            width: 445px;
            height: 62px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .zong form .end .iconfont{
            font-size: 60px;
            padding-left: 20px;
        }
        .zong form .end .shenglan{
            color: #1989fa;
        }
        .zong form .end .lv{
            color: #50b674;
        }
        .zong form .end .qianlan{
            color: #18acfc;
        }
        .zong form .end .hong{
            color: #ea5d5c;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="tu">
            <img src="img/banner.4994397e.jpg" alt="">
        </div>
        <div class="zong">
            <div class="header">
                    <section>
                        <h1><img src="img/logo-mi2.png" alt=""></h1>
                        <p>小米账号</p>
                    </section>
                   <ul>
                       <a href=""><li>用户协议</li></a>
                       <a href=""><li>隐私政策</li></a>
                       <a href=""><li>帮助中心</li></a>
                       <a href=""><li>
                           <span>中文(93简体)</span>
                           <h6></h6>
                           <h5></h5>
                       </li></a>
                   </ul>
            </div>

            
                <form action="" method="get">
                    <div class="head">
                       <a href="denglu.html"><h2>登录</h2></a> 
                      <a href=""><h2>注册</h2></a>  
                    </div>

                    <div class="chan">
                        <span>国家/地区</span>
                     <select name="" id="">
                         <option value="" selected>中国</option>
                         <option value="">加拿大</option>
                         <option value="">新加坡</option>
                         <option value="">韩国</option>
                         <option value="">日本</option>
                         <option value="">叙利亚</option>
                     </select>
                    </div>
                    
                    <div class="guo">
                        <div class="jia">
                            <span>国家码</span>
                            <select name="" id="">
                                <option value="" selected>+86</option>
                                <option value="">
                                    <span>阿富汗</span>
                                    <span>+93</span>
                                </option>
                                <option value="">
                                    <span>阿尔巴尼亚</span>
                                    <span>+355</span>
                                </option>
                                <option value="">
                                    <span>阿尔及利亚</span>
                                    <span>+213</span>
                                </option>
                                <option value="">
                                    <span>美属萨摩亚</span>
                                    <span>+1</span>
                                </option>
                                <option value="">
                                    <span>安道尔</span>
                                    <span>+376</span>
                                </option>
                                 </select>
                        </div>
                        
                            <input type="text" placeholder="手机号" id="number">
                       </div>
                        <span id="one"></span>
                        


                        <div class="duanxin">
                            <input type="text" placeholder="短信验证码" id="number2">
                            <input type="text" name="" id="btn" placeholder="获取验证码">
                            <!-- <button id="btn">获取验证码</button> -->
                        </div>
                        <span id="two"></span>

                    <div class="xieyi">
                    <input type="checkbox" id="che">已阅读并同意小米账号<strong>用户协议</strong>和<strong>隐私政策</strong>
                    
                    </div>
                    <a href="denglu.html"><button id="btnReg">注册</button></a>
                    <div class="foot">
                        <a href=""><span>忘记密码?</span></a>
                        <a href=""><span>手机号登录</span></a>
                    </div>
                    <h4>其他方式登录</h4>
                    <div class="end">
                        <span class="iconfont icon-zhifubao shenglan"></span>
                        <span class="iconfont icon-weixin lv"></span>
                        <span class="iconfont icon-QQ qianlan"></span>
                        <span class="iconfont icon-weibo hong"></span>
                    </div>
                </form>
            
        </div>
    </div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script>
    $(".zong .header ul a:last ").mousemove(function(){
        $(".zong .header ul a h6").css({
            display:"none"
     
        });
    });
    $(".zong .header ul a:last ").mouseout(function(){
        $(".zong .header ul a h6").css({
            display:"block"
     
        });
    });

    $(".zong .header ul a:last ").mousemove(function(){
        $(".zong .header ul a h5").css({
            display:"block"
        
        });
    });
    $(".zong .header ul a:last ").mouseout(function(){
        $(".zong .header ul a h5").css({
            display:"none"
         
        });
    });

    var flagPho = false;//手机
    var flagPwd = false;//密码

    $("#number").blur(function () {
    let regPho = /^1[3578]\d{9}$/;
    if (regPho.test($(this).val())) {
        $("#one").html("输入正确！");
        flagPho = true;
    } else {
        $("#one").show();
        $("#one").html("请输入正确的手机号！");
        $(this).click(function () {
            $("#one").hide();
        })
        flagPho = false;
    }
});
$("#btn").click(function () {
        createCode();
    });
let code;
    function createCode() {
        code = ''; 
        var codeLength = 6;
      
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
        for (var i = 0; i < codeLength; i++) {   
            var index = Math.floor(Math.random() * 62);   
            code += random[index]; //字符串拼接 将每次随机的字符 进行拼接 
        }
        $("#btn").val(code);//将拼接好的字符串赋值给展示的Value 
    }
    $("#number2").blur(function(){
  if( $("#number2").val() == $("#btn").val()){
        $("#two").html("输入正确！");
        flagPwd = true;
    }else{
         $("#two").show();
        $("#two").html("请输入正确的手机号！");
        $(this).click(function () {
            $("#one").hide();
        });
        flagPho = false;
    }
    });
  

    $("#btnReg").click(function () {
      
    checkuser()
});

function checkuser() {
    $.ajax({
        url: "./goodsAndShoppingCart/checkUser.php",
        type: "get",
        data: {
            username: $("#number").val()
        },
        success: function (resText) {
            // console.log(resText);
            if (resText == 0) {
                alert("用户名已存在，请勿重新注册！")
            } else {
                alert("注册成功！")
                addUser()
            }
        }
    });
}
function addUser() {
    $.ajax({
        url: "./goodsAndShoppingCart/addUser.php",
        type: "post",
        data: {
            username: $("#number").val(),
            userpass: $("#pwd").val()
        },
        success: function (data) {
            console.log(data);
            if (data.trim() == "success") {
                alert("注册成功，请登录！")
            } else {
                alert("注册失败，请重新注册！")
            }
        }
    });
}


</script>




